<template>
  <div class="set-condition">
    <el-dialog
      :title="$t('条件设置')"
      v-if="dialogVisible"
      :visible.sync="dialogVisible"
      width="40%"
      :before-close="handleClose"
      :append-to-body="true"
    >
      <div class="set-condition-content">
        <div class="set-condition-content-header">
          <span>{{ $t('双击选择数据域到公示框') }}</span>
          <el-button type="text" @click="reset">{{ $t('重置') }}</el-button>
        </div>
        <el-row style="margin-bottom: 10px">
          <el-col :span="12">
            <el-input
              v-model="ruleValue"
              :placeholder="$t('请输入条件')"
            ></el-input>
          </el-col>
          <el-col :span="12">
            <el-button
              style="margin-left: 10px"
              type="text"
              @click="addRule"
              :disabled="!ruleValue"
              >{{ $t('添加') }}</el-button
            >
          </el-col>
        </el-row>
        <div class="set-condition-content-condition">
          <el-input
            v-model="ruleTextShow"
            type="textarea"
            :rows="4"
            :placeholder="$t('请输入')"
          ></el-input>
        </div>
        <div class="set-condition-content-data">
          <div class="set-condition-content-data-left">
            <div class="set-condition-content-data-left-search">
              <el-input
                :placeholder="$t('请输入关键字查询')"
                v-model="searchText"
              >
                <span
                  slot="suffix"
                  class="el-icon-search input-icon"
                  @click="search"
                ></span>
              </el-input>
            </div>
            <div class="set-condition-content-data-left-tree">
              <el-tree
                ref="dataTree"
                :data="dataList"
                :props="defaultProps"
                node-key="ruleFieldKey"
              >
                <span class="custom-tree-node" slot-scope="{ node, data }">
                  <div class="user-info">
                    <div
                      class="user-info-name"
                      :class="{ 'condition_item_active': data.ruleFieldKey && bussinessData.ruleFieldKey === data.ruleFieldKey }"
                      @click="handleNodeClick(data)"
                      @dblclick="handleNodeDblClick(data)">
                      {{ data.ruleFieldName || data.groupName }}
                    </div>
                  </div>
                </span>
              </el-tree>
            </div>
          </div>
          <div class="set-condition-content-data-right">
            <div
              class="set-condition-content-data-right-item"
              v-for="(item, index) in calcList"
              :key="index"
            >
              <div
                class="set-condition-content-data-right-item-calc"
                v-for="its in item"
                :key="its.value"
                @click="handleCondion(its)"
              >
                {{ its.label }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">{{ $t('取 消') }}</el-button>
        <el-button type="primary" @click="confirm">{{ $t('确 定') }}</el-button>
      </span>
    </el-dialog>
    <improveFormula
      v-if="improveFormulaVisible"
      v-model="improveFormulaVisible"
      :bussinessData="bussinessData"
      :setType="setType"
      :rowData="rowData"
      @improveFormula="improveFormula"
    />
  </div>
</template>
<script>
import { calcList, calcObj } from './common.js'
import api from '@/services/defineContract.js'
import improveFormula from './improveFormula.vue'
export default {
    components: {
        improveFormula
    },
    props: {
        value: Boolean,
        itemData: { // 条件
            type: Object,
            default: () => {
                return {}
            }
        },
        row: { // 抬头信息/项目明细当前行数据
            type: Object,
            default: () => {
                return {}
            }
        },
        rowData: {
            type: Object,
            default: () => {
                return {}
            }
        },
        currentIndex: Number,
        id: {},
    },
    data() {
        return {
            dialogVisible: false,
            searchText: '',
            dataList: [],
            calcList,
            calcObj,
            ruleTextShow: '',
            ruleText: '',
            bussinessData: {
                ruleFieldKey: ''
            },
            defaultProps: {
                label: 'ruleFieldName',
                children: 'definitionRuleFieldDtoList',
            },
            relatedRuleFieldList: [],
            setType: null, // 1文本 2枚举
            improveFormulaVisible: false,
            ruleValue: ''
        }
    },
    created() { 
        this.dialogVisible = this.value;
        this.queryTemplateDefinitionRuleFieldList();
        if(this.itemData.ruleTextShow) {
            this.ruleTextShow = this.itemData.ruleTextShow;
            this.ruleText = this.itemData.ruleText;
            this.relatedRuleFieldList = this.itemData.relatedRuleFieldList || [];
        }
    },
    methods: {
        queryTemplateDefinitionRuleFieldList() {
            api.queryTemplateDefinitionRuleFieldList({
                definitionId: this.id,
                parameterName: this.searchText,
            }).then(res => {
                this.dataList = res.data.definitionRuleFieldListGroupDtoList || [];
            })
        },
        search() {
            this.queryTemplateDefinitionRuleFieldList();
        },
        handleNodeClick(data) {
            this.bussinessData = data;
        },
        // 双击后回作为变量显示在条件设置文本区域
        handleNodeDblClick(data) {
            console.log(data,'data');
            this.bussinessData = {};
            this.relatedRuleFieldList.push(data);
            this.ruleTextShow = this.ruleTextShow + data.ruleFieldName;
            this.ruleText = this.ruleText + data.ruleFieldKey;
        },
        handleCondion(item) {
            if (JSON.stringify(this.bussinessData) === '{}') {
                this.$message.error(this.$t('请先单击选择业务要素！'));
                return;
            }
            // 包含、不包含 不可直接使用，需选择业务要素后操作，业务要素必须是文本或文本域才支持打开完善公式弹框
            if(['contains','not contains'].includes(item.value) && ![1,6].includes(this.bussinessData.parameterType)) {
                this.$message.error(this.$t('请选择符合条件的字段操作！'));
                return
            }
            if(['contains','not contains'].includes(item.value) && [1,6].includes(this.bussinessData.parameterType)) {
                this.setType = 1;
                this.improveFormulaVisible = true;
                return
            }

            // extend 不可直接使用，需选择业务要素后操作，业务要素必须是单选、复选、才支持打开完善公式弹框
            if(['extend'].includes(item.value) && ![3,4].includes(this.bussinessData.parameterType)) {
                this.$message.error(this.$t('请选择符合条件的字段操作！'));
                return
            }
            if(['extend'].includes(item.value) && [3,4].includes(this.bussinessData.parameterType)) {
                this.setType = 2;
                this.improveFormulaVisible = true;
                return
            }
            this.ruleTextShow = this.ruleTextShow + item.value;
            this.ruleText = this.ruleText + item.value;
        },
        // 完善公式
        improveFormula(data) {
            this.ruleTextShow = this.ruleTextShow + data.text;
            this.ruleText = this.ruleText + data.value;
            this.relatedRuleFieldList.push(this.bussinessData);
            this.bussinessData = {};
        },
        reset() {
            this.ruleTextShow = '';
            this.ruleText = '';
            this.ruleValue = '';
            this.bussinessData = {};
            this.relatedRuleFieldList = [];
        },
        addRule() {
            this.ruleTextShow = this.ruleTextShow + (this.ruleValue || '');
            this.ruleText = this.ruleText + (this.ruleValue || '');
        },
        handleClose() {
            this.$emit('input', false);
        },
        confirm() {
            let params = {
                ruleText: this.ruleText,
                ruleTextShow: this.ruleTextShow,
                relatedRuleFieldList: this.relatedRuleFieldList,
                currentIndex: this.currentIndex,
            }
            api.checkTemplateDefinitionRuleText({ definitionId: this.id, ruleText: this.ruleText }).then(res => {
                if(res.code == 200){
                    this.$emit('setCondition', params);
                    this.handleClose();
                }
            })
        },
    }
}
</script>
<style lang="scss" scoped>
.set-condition {
    &-content {
        padding-left: 30px;
        padding-right: 30px;
        box-sizing: border-box;
        &-header {
            display: flex;
            justify-content: space-between;
            font-weight: 400;
            font-size: 16px;
            color: #333333;
        }
        &-data {
            margin-top: 20px;
            display: flex;
            justify-content: space-between;
            overflow: hidden;
            &-left {
                width: 48%;
                border-radius: 8px;
                border: 1px solid rgba(0,0,0,0.15);
                &-search {
                    background: #f8f8f8;
                    height: 45px;
                    padding: 5px 10px;
                    border-radius: 8px;
                    box-sizing: border-box;
                    ::v-deep .el-input__suffix {
                        line-height: 30px !important;
                    }
                    .input-icon {
                        cursor: pointer;
                    }
                }
                &-tree {
                    max-height: 450px;
                    overflow: auto;
                    box-sizing: border-box;
                    padding: 10px;
                }
            }
            &-right {
                width: 48%;
                &-item {
                    display: flex;
                    flex-wrap: wrap;
                    border-bottom: 1px solid #ECEDF2;
                    margin-bottom: 15px;
                    &-calc {
                        width: 28%;
                        text-align: center;
                        background: #F1F5FF;
                        border-radius: 2px;
                        height: 32px;
                        line-height: 32px;
                        font-size: 14px;
                        color: #333333;
                        margin-left: 12px;
                        margin-bottom: 12px;
                        cursor: pointer;
                    }
                }
                &-item:last-child {
                    border-bottom: 0 none;
                }
            }
        }
    }
}
.custom-tree-node {
    width: 100%;
}
.condition_item_active {
    background-color: #337ecc;
    color: #fff;
}
</style>
